#index {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  // height: 100vh;

  .bg {
    padding: 0.2rem 0.2rem 0 0.2rem;
    //background-image: url('~@/assets/img1/bg.jpg');
    background-image: url('~@/assets/images/pageBg.png');
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    .title {
      position: relative;
      width: 6.25rem;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 0.3rem;
        position: absolute;
        bottom: 0.375rem;
        left: 50%;
        transform: translate(-50%);
      }

      .title-bototm {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
      }
    }

    // 平行四边形
    .react-left {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-right {
      cursor: pointer;
      font-size: 0.225rem;
      width: 3.75rem;
      height: 0.625rem;
      line-height: 0.625rem;
      text-align: center;
      transform: skewX(45deg);

      .react-before {
        position: absolute;
        left: -0.3125rem;
        top: 0;
        height: 0.625rem;
        width: 0.625rem;
        background-color: #0f1325;
        transform: skewX(-45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(-45deg);
      }
    }

    .body-box {
      margin-top: 0.2rem;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      // align-items: flex-start;
      // grid-template-columns: 1fr 6.25rem 1fr 1fr;
      // flex-direction: column;

      .left-box {
        // background-color: aqua;
      }

      .center-box {
        // background-color: azure;
        padding: 10px 10px 0;
        display: flex;
        flex-direction: column;

        .center-hd {
          position: relative;
          background-color: rgba(19, 25, 47, 0.2);
          width: 100%;

          ul {
            display: flex;
            text-align: center;
            margin: auto 0;
            padding: 10px 0;
            li {
              flex: 1
            }
          }

        }

        .center-hd::before {
          position: absolute;
          content: "";
          left:0;
          top:0;
          width: 10px;
          height: 10px;
          border-left:2px solid rgba(124, 231, 253, 0.9);
          border-top:2px solid rgba(124, 231, 253, 0.8);
        }

        .center-hd::after {
          position: absolute;
          content: "";
          right:0;
          bottom:0;
          width: 10px;
          height: 10px;
          border-right:2px solid rgba(124, 231, 253, 0.9);
          border-bottom:2px solid rgba(124, 231, 253, 0.8);
        }

        .center-bd {
          margin-top: 10px;
          background-color: rgba(19, 25, 47, 0.2);
          position: relative;
          // background-color: aquamarine;
          padding: 0.625rem 0.25rem;
          top: 0;
          left: 0;
          height: 10.375rem;
          z-index: 9;

          &-bg {
            position:absolute;
            // opacity: .9;
            left:2rem;
            top: 1.125rem;
            width: 7.075rem;
            height: 7.075rem;
            z-index: 1;
            opacity: 0.2;
            transform:translate(-50%,-50%);
            animation: myfirst 10s infinite linear;
          }

          @keyframes myfirst
          {
          from {transform: rotate(0deg);}
          to {transform: rotate(-359deg);}
          }
        }

        .center-bd::before {
          position: absolute;
          content: "";
          left:0;
          top:0;
          width: 10px;
          height: 10px;
          border-left:2px solid rgba(124, 231, 253, 0.9);
          border-top:2px solid rgba(124, 231, 253, 0.8);
        }

        .center-bd::after {
          position: absolute;
          content: "";
          right:0;
          top:0;
          width: 10px;
          height: 10px;
          border-right:2px solid rgba(124, 231, 253, 0.9);
          border-top:2px solid rgba(124, 231, 253, 0.8);
        }

      }

      .right-box {
        // background-color:forestgreen;
      }

      .panel {
        position: relative;
        // height: 3.75rem;
        border:1px solid rgba(19, 25, 47, 0.8);
        margin: 10px 0;
        background-color: rgba(19, 25, 47, 0.2);

        &-under {
          width: 100%;
        }

        &-under::before {
          position: absolute;
          content: "";
          left:0;
          bottom:0;
          width: 10px;
          height: 10px;
          border-left:2px solid rgba(124, 231, 253, 0.9);
          border-bottom:2px solid rgba(124, 231, 253, 0.8);
        }

        &-under::after {
          position: absolute;
          content: "";
          right:0;
          bottom:0;
          width: 10px;
          height: 10px;
          border-right:2px solid rgba(124, 231, 253, 0.9);
          border-bottom:2px solid rgba(124, 231, 253, 0.8);
        }
      }
      .panel::before {
        position: absolute;
        content: "";
        left:0;
        top:0;
        width: 10px;
        height: 10px;
        border-left:2px solid rgba(124, 231, 253, 0.9);
        border-top:2px solid rgba(124, 231, 253, 0.8);
      }

      .panel::after {
        position: absolute;
        content: "";
        right:0;
        top:0;
        width: 10px;
        height: 10px;
        border-right:2px solid rgba(124, 231, 253, 0.9);
        border-top:2px solid rgba(124, 231, 253, 0.8);
      }

    }
  }
}
